/**
 * v-preventReClick 避免重复点击指令
 * 指令用法：
 *  - 在需要的按钮或者链接上面加指令，格式：v-preventReClick:[xxx]='true'
 *  - 说明：
 *    1、xxx 非必要，表示当前点击的按钮，可配合loading('xxx')的computed属性进行按钮的loading属性赋值，比如：
 *       <a-button :loading="loading('test') v-preventReClick:[test]='true'>删除用户</a-button>
 *    2、true 非必要，表示是否要全局的loading效果
 *    3、一组按钮的disabled，通过btndisabled的computed属性进行控制，如：
 *    <a-button :disabled="btndisabled" :loading="loading('test') v-preventReClick:[test]='true'>删除用户</a-button>
 *  - 指令的loading和disabled的属性依赖form-mixin中的computed实现
 *
 */

import store from '@/store/index.js'

export default {
  // 防重复点击(指令实现)
  name: 'preventReClick',
  directive: {
    inserted (el, binding, vnode) {
      let { value: param, arg = '' } = binding
      el.addEventListener('click', () => {
        store.commit('setCurrBtn', arg) // 设置当前的按钮，配合form-mixin中的loading方法，实现按钮的loading效果
        store.commit('showloadding', true) // 避免校验不通过导致按钮置灰，所以先+1
        if (param === true) {
          // 是否需要loading的全局遮罩
          store.commit('startLoading', true)
        }
        let v = vnode.context
        let unwatch = v.$watch('$store.state.loadding', function (val, oldval) {
          if (val === 0) {
            if (param === true) {
              // 是否需要loading的全局遮罩
              store.commit('startLoading', false)
            }
            store.commit('setCurrBtn', '')
            unwatch()
          }
        })
        store.commit('showloadding', false) // 结束-1，这样watch能监听到数据的变化，特别是校验不通过时没有进入http请求，导致不会进入监听
      })
    }
  }
}
